<template>
  <div class="content">
    <div class="box">
      <h1>XLX</h1>
      您的好友向你分享文件
      <a href="#" @click.prevent="fx">{{ title }}</a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: this.$route.query.title,
      url: this.$route.query.id
    };
  },
  methods: {
    fx() {
      this.openDownload(this.url, this.title);
    },
    openDownload(url, name) {
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", name);
      document.body.appendChild(link);
      link.click();
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  width: 100vw;
  height: 100vh;
  background-color: #f7fcfe;
  background-image: url(../assets/loginbg.svg);
  background-repeat: no-repeat;
  background-position: 45% 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .box {
    margin-top: 30vh;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px #eee;
    border-radius: 10px;
    h1 {
      padding-bottom: 20px;
    }
  }
}
</style>
